<template>
  <div class="search">
    <Card>
      <Row class="operation padding-row">
        <Button @click="handleAdd" type="error">添加轮播</Button>
        <span style="margin: auto 0; color: #a9a9a9">建议尺寸：1920*510</span>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        sortable="custom"
        class="mt_10"
        :data="data"
        ref="table"
      >
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="handleImage(row)"
            >选择图片</Button
          >
          <Button
            type="warning"
            size="small"
            style="margin-right: 5px"
            @click="handleLink(row)"
            >选择链接</Button
          >
          <Button type="error" size="small" ghost @click="handleDel(row, index)">删除</Button>
        </template>
      </Table>
    </Card>
    <check-image :value="picFlag" @on-close="onCloseImage" @on-save="checkImage" />
    <check-link :value="linkFlag" @on-close="onCloseLink" @on-save="checkLink" />
  </div>
</template>

<script>
import * as API_Pather from "@/api/pather.js";
import checkImage from "@/views/partner-manage/partner-banner/cp/checkImage";
import checkLink from "@/views/partner-manage/partner-banner/cp/checkLink";
export default {
  name: "banner",
  components: { checkImage, checkLink },
  data() {
    return {
      loading: false, // 加载状态
      picFlag: false, // 选择图片弹窗
      linkFlag: false, // 选择链接弹窗
      linkRow: {}, //当前操作行
      columns: [
        // 表头
        {
          title: "所选图片",
          align: "center",
          minWidth: 300,
          render: (h, params) => {
            return h("img", {
              attrs: { src: params.row.pic },
              style: { width: "300px" },
            });
          },
        },
        {
          title: "链接地址",
          align: "center",
          minWidth: 300,
          render: (h, params) => {
            return h("Input", {
              props: { value: params.row.jumpUrl },
              on: {
                'on-blur': () => {
                  this.submitForm();
                },
                input: (val) => {
                  this.data[params.index].jumpUrl = val;
                },
              },
            });
          },
        },
        {
          title: "操作",
          align: "center",
          width: 300,
          fixed: "right",
          slot: "action",
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
    };
  },
  methods: {
    // 新增
    handleAdd() {
      this.data.push({ pic: "", jumpUrl: "", jumpType: "PC" });
    },
    // 选择图片
    handleImage(v) {
      this.linkRow = v;
      this.picFlag = true;
    },
    // 选择链接
    handleLink(v) {
      this.linkRow = v;
      this.linkFlag = true;
    },
    // 关闭选择链接弹窗
    onCloseLink(v) {
      this.linkRow = {};
      this.linkFlag = v;
    },
    // 关闭选择图片弹窗
    onCloseImage(v) {
      this.linkRow = {};
      this.picFlag = v;
    },
    // 保存图片
    checkImage(v) {
      this.data.forEach((i) => {
        if (i.id == this.linkRow.id) {
          i.pic = v;
        }
      });
      this.submitForm();
    },
    // 保存选择链接
    checkLink(v) {
      this.data.forEach((i) => {
        if (i.id == this.linkRow.id) {
          i.jumpUrl = v;
        }
      });
      this.submitForm();
    },
    // 保存轮播图
    submitForm() {
      API_Pather.updateBanner(this.data)
        .then((res) => {
          if (res.success) {
            this.$Message.success("已保存");
            this.getData();
          }
        })
        .finally(() => {
          this.picFlag = false;
          this.linkFlag = false;
        });
    },
    // 删除
    handleDel(v,index) {
      if (!v.id) {
        this.data.splice(index, 1);
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "<p>您确认要删除此条轮播图吗？</p>",
        onOk: () => {
          API_Pather.delBanner(v.id).then((res) => {
            if (res.success) {
              this.$Message.success("删除成功");
              this.getData();
            }
          });
        },
      });
    },
    //查询轮播图列表
    getData() {
      this.loading = true;
      API_Pather.getBannerList()
        .then((res) => {
          if (res.success) {
            this.data = res.result;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.modal-info {
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  .ivu-row {
    min-height: 60px;
    height: auto;
  }
  .box-border {
    min-height: 60px;
    width: 80%;
    height: auto;
  }
}
</style>
